<template>
  <div>
    <!-- 添加或修改化学品使用对话框 -->
    <el-dialog title="化学品使用管理" :visible.sync="open" width="900px" append-to-body>
      <el-form :model="productCas">
        <el-row>
          <el-col :span="10">
            <el-form-item label="试剂名称" class="item">
              {{productCas.materialName}}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="计量单位" class="item">
              {{productCas.unitName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="包装重量" class="item">
              {{productCas.packageWeight}}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label=" 申领老师" class="item">
              {{productCas.applyTeacher}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom:5px" >
          <el-col :span="10">
            使用记录
          </el-col>
          <el-col :span="14">
            <el-button style="float:right" v-hasPermi="['labdanger:using:edit']" @click="handleAdd" v-if="!edit && productCas.inventoryNum>0">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table border v-loading="loading" :data="chemicalUseList">
        <el-table-column label="编号" align="center" prop="id" width="50"/>
        <el-table-column label="时间" align="center" prop="useTime" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.useTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="领用" width="50" align="center" prop="availableNum" />
        <el-table-column label="用途" align="center" prop="useFor" :show-overflow-tooltip="true"/>
        <el-table-column label="使用" width="50" align="center" prop="useNum" />
        <el-table-column label="剩余" width="50" align="center" prop="leftNum" />
        <el-table-column label="使用人" align="center" prop="userName" />
        <el-table-column label="余存" align="center" prop="labName" :show-overflow-tooltip="true"/>
        <el-table-column label="备注" align="center" prop="note" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" v-if="!productCas.isHis" width="50">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['labdanger:using:delete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form v-if="edit" ref="form" :model="form" :rules="rules" label-width="80px" style="margin-top: 10px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="领用时间" prop="useTime">
              <el-date-picker clearable size="small" style="width: 280px" v-model="form.useTime" type="date"
                value-format="yyyy-MM-dd" placeholder="选择使用时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用数量" prop="availableNum" >
              <el-input v-model="form.availableNum" disabled size="small" class="input_chemical"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用数量" prop="useNum">
              <el-input v-model="form.useNum" type="number" placeholder="请输入使用数量" size="small" class="input_chemical"
              @blur="computerLeftNum" @keyup.enter.native="computerLeftNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="剩余数量" prop="leftNum">
              <el-input v-model="form.leftNum" type="number" disabled placeholder="自动带入" size="small" class="input_chemical"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="用途" prop="useFor">
          <el-input v-model="form.useFor" placeholder="请输入用途" size="small" style="width:712px"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用人" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入使用人" size="small" class="input_chemical"
               @blur="searchUser" @keyup.enter.native="searchUser"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名" prop="nickName">
              <el-input v-model="form.nickName" placeholder="自动带入" disabled size="small" class="input_chemical"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="note">
          <el-input v-model="form.note" type="textarea" rows="3" placeholder="请输入备注" style="width:712px"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="edit && productCas.inventoryNum>0" v-hasPermi="['labdanger:using:edit']">确 定</el-button>
        <el-button @click="cancel" v-if="edit">取 消</el-button>
        <el-button @click="close">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listChemicalUse,
    getChemicalUse,
    delChemicalUse,
    addChemicalUse,
    updateChemicalUse,
    exportChemicalUse
  } from "@/api/labdata/chemicalUse";
import {
    searchEmployee
  } from "@/api/labdata/employee"
  export default {
    name: "ChemicalUse",
    data() {
      return {
        productCas: {},
        edit: false,
        // 遮罩层
        loading: true,
        // 化学品使用表格数据
        chemicalUseList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 1000,
          detailId: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          useTime: [{
            required: true,
            message: "使用时间不能为空",
            trigger: "blur"
          }],
          userName: [{
            required: true,
            message: "使用人不能为空",
            trigger: "blur"
          }],
          availableNum: [{
            required: true,
            message: "领用数量不能为空",
            trigger: "blur"
          }],
          useNum: [{
            required: true,
            message: "使用数量不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {

    },
    methods: {
      /** 查询化学品使用列表 */
      getList() {
        if(this.queryParams.detailId){
          this.loading = true;
          listChemicalUse(this.queryParams).then(response => {
            this.chemicalUseList = response.rows;
            this.loading = false;
          });
        }
      },
      searchUser() {
        if (!this.form.userName) {
          this.form.nickName = null;
          return;
        } else
          searchEmployee(this.form.userName).then(response => {
            let searchResult = response.data;
            if (searchResult) {
              this.form.nickName = searchResult.nickName;
            } else {
              this.form.nickName = null;
            }
            this.$forceUpdate();
          });

      },
      computerLeftNum(){
        if(!this.form.useNum){
          return;
        }
        this.form.leftNum = this.form.availableNum - this.form.useNum;
        this.$forceUpdate();
      },
      // 关闭按钮
      cancel() {
        this.edit = false;
        this.reset();
      },
      close() {
        this.open = false;
        this.edit = false;
        this.reset();
        this.$emit("refresh");
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      openUseEdit(data){
        this.productCas = data;
        this.queryParams.detailId = this.productCas.productId;
        this.getList();
        this.open =true;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.form.labId = this.productCas.orgId;
        this.form.detailId = this.productCas.productId;
        this.form.availableNum = this.productCas.inventoryNum;
        this.edit = true;
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            addChemicalUse(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.edit = false;
              this.productCas.inventoryNum = this.productCas.inventoryNum - this.form.useNum;
              this.getList();
            });
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除化学品使用编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delChemicalUse(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      },
    }
  };
</script>
<style type="text/css" scoped>
  .item{
    margin-bottom: 5px;
  }
  .input_chemical{
    width:280px;
  }
</style>
